<style scoped>

</style>
<template>
    <div>
        <div class="top-title bg-white">
            <div class="top-title-text black blod" style="font-size:22px;">机构管理</div>
        </div>
        <div class="page-content flex-column bg-white" style="height: calc(100% - 50px);">




            <div class="flex m-b-20" style="height: calc(100% - 50px)">

                <div class="w25p" style="height: calc(100% - 50px)">
                    <div class="top-title-text text-18 black blod">组织机构</div>
                    <div class="m-10 p-15" style="border:1px solid #ccc;" :style="{height: '100%'}">
                        <!--<Input v-model="search.str" class="" type="text" placeholder="请输入机构名称"/>-->

                        <Tree :data="list" :render="renderContent" @on-select-change="changeSelect"></Tree>

                    </div>



                </div>
                <div class="w60p">
                    <div class="top-title-text text-18 black blod">基础信息</div>
                    <div class="p-20">

                        <div class="flex h30 m-b-20">

                            <div class="flex w30p">
                                <div class="gray w80">上级组织：</div>
                                <div class="flex-1">{{detail.parent_name}}</div>
                            </div>
                            <div class="flex w30p">
                                <div class="gray w80">机构名称：</div>
                                <div class="flex-1">{{detail.or_name}}</div>
                            </div>
                        </div>

                        <div class="flex h30 m-b-20">

                            <!--<div class="flex w30p">-->
                                <!--<div class="gray w80">机构编码：</div>-->
                                <!--<div class="flex-1">{{detail.report_name}}</div>-->
                            <!--</div>-->
                            <div class="flex w30p">
                                <div class="gray w80">联系人：</div>
                                <div class="flex-1">{{detail.contact_person}}</div>
                            </div>

                            <div class="flex w30p">
                                <div class="gray w80">手机号码：</div>
                                <div class="flex-1">{{detail.contact_phone}}</div>
                            </div>
                        </div>

                        <!--<div class="flex h30 m-b-20">-->

                            <!--<div class="flex w30p">-->
                                <!--<div class="gray w80">手机号码：</div>-->
                                <!--<div class="flex-1">{{detail.contact_phone}}</div>-->
                            <!--</div>-->
                        <!--</div>-->

                        <div class="flex h30 m-b-20">

                            <div class="flex">
                                <div class="gray w80">备注：</div>
                                <div class="flex-1">{{detail.remark}}</div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>


        <Modal v-model="itemModal"
               :title="itemData.id? '编辑机构': '新增机构'"
               class-name="vertical-center-modal"
               width="800"
        >
            <div class="p-l-20">
                <div class="top-title-text text-18 black blod">基础信息</div>
                <div class="p-15-0 max-h500">
                    <Form label-position="top">

                        <Row>
                            <Col span="11">
                                <FormItem label="所属机构" required >
                                    <Input readonly v-model="parentData.name" class="w240" type="text"/>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center"></Col>
                            <Col span="11">
                                <FormItem label="机构名称" required>
                                    <Input v-model="itemData.or_name" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span="11">
                                <FormItem label="联系人" required>
                                    <Input v-model="itemData.contact_person" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center"></Col>
                            <Col span="11">
                                <FormItem label="联系方式" required>
                                    <Input v-model="itemData.contact_phone" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>

                        <FormItem label="备注">
                            <Input v-model="itemData.remark" type="textarea" maxlength="500" show-word-limit
                                   :rows="4" class="flex-1" placeholder="请输入备注"></Input>
                        </FormItem>
                    </Form>

                </div>
            </div>

            <div slot="footer">
                <Button @click="itemModal = false" class="m-r-10">取消</Button>
                <Button @click="confirm" type="primary">确定</Button>
            </div>
        </Modal>

    </div>
</template>

<script>

    export default {
        data() {
            return {
                search: {
                    str: '',
                },

                tableHeight: 500,

                detailId: '',
                detail: {},
                list: [],

                itemModal: false,
                itemData: {
                    "parent_id":"",
                    "or_name": "",
                    "contact_person": "",
                    "contact_phone": "",
                    "remark": ""
                },
                parentData: '',

            }
        },
        created() {
            // this.getList();
            this.getOrList();
        },
        mounted() {
            let mainContent = document.getElementById('mainContent')
            if(mainContent) {
                this.tableHeight =  mainContent.offsetHeight - 40
            }
            this.timer = setInterval(() => {
                if(mainContent) {
                    this.tableHeight =  mainContent.offsetHeight - 40
                } else {
                    mainContent = document.getElementById('mainContent')
                }
            }, 1000)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        methods: {
            getOrList() {

                let postData = {
                    pageSize: this.pageSize,
                    pageNum: this.page,
                    orName: this.search.str,
                };
                this.util.get('/shCloud/orLists', postData).then(res => {
                    console.log('获取列表', JSON.parse(JSON.stringify(res)))
                    if(res.data) {
                        res.data.forEach(v => {
                            v.expand = true
                            v.children && v.children.forEach(val => val.expand = true);
                        })

                    }
                    this.list = res.data || [];
                    if(!this.detailId && this.list.length) {
                        this.detailId = this.list[0].id
                        this.getDetail()
                    } else {
                        this.getDetail()
                    }

                })
            },
            changeSelect(item) {
                console.log('所选机构', JSON.parse(JSON.stringify(item)));
                // this.detail = item[0] || '';
                if(item[0]) {
                    this.detailId = item[0].id;
                    this.getDetail()
                }



            },
            getDetail() {

                let postData = {
                    orId: this.detailId,
                };
                this.util.get('/shCloud/orInf', postData).then(res => {
                    console.log('获取详情', JSON.parse(JSON.stringify(res)))
                    this.detail = res.data || {};

                })

            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.name)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: {
                                icon: 'ios-add',
                                size: 'small'
                            },
                            style: {
                                marginLeft: '8px',
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.addChild(data) }
                            }
                        }),
                        h('Button', {
                            props: {
                                icon: 'ios-create-outline',
                                size: 'small'
                            },
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.editItem(data) }
                            }
                        }),
                        h('Button', {
                            props: {
                                icon: 'ios-remove',
                                size: 'small'
                            },
                            on: {
                                click: () => { this.removeItem(root, node, data) }
                            }
                        })
                    ])
                ]);
            },

            addItem() {
                this.itemModal = true;
                this.itemData = {
                    "or_name": "",
                    "contact_person": "",
                    "contact_phone": "",
                };
            },
            addChild(item) {
                console.log('item', item);
                this.parentData = item;
                this.itemModal = true;
                this.itemData = {
                    "or_name": "",
                    "contact_person": "",
                    "contact_phone": "",
                };
            },
            editItem(item) {
                console.log('item', item);

                let postData = {
                    orId: item.id,
                };
                this.util.get('/shCloud/orInf', postData).then(res => {
                    console.log('获取详情', JSON.parse(JSON.stringify(res)))
                    let data = res.data || {};

                    this.parentData = {
                        id: data.parent_id,
                        name: data.parent_name,
                    };
                    this.itemModal = true;
                    this.itemData = {
                        id: data.id,
                        "or_name": data.or_name,
                        "contact_person": data.contact_person,
                        "contact_phone": data.contact_phone,
                        remark: data.remark,
                    };

                })

            },
            removeItem(root, node, data) {
                console.log('root', root);
                console.log('node', node);
                console.log('data', data);


                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认要删除吗？</p>',
                    onOk: () => {

                        let postData = {
                            orId: data.id
                        };

                        this.util.post('/shCloud/deletOr', postData, 'formdata').then(res => {
                            if(res.status == 200) {
                                this.$Message.success(res.msg);
                                // this.detailId = 0;
                                this.getOrList();
                            } else {
                                this.$Message.warning(res.msg)
                            }
                        })

                    },
                });

                // const parentKey = root.find(el => el === node).parent;
                // const parent = root.find(el => el.nodeKey === parentKey).node;
                // const index = parent.children.indexOf(data);
                // parent.children.splice(index, 1);
            },

            confirm() {
                let itemData = this.itemData;

                if(!itemData.or_name) {
                    this.$Message.warning('请输入单位名称');
                    return;
                }

                let postData = {
                    "parent_id":this.parentData.id,
                    "or_name": itemData.or_name,
                    "contact_person": itemData.contact_person,
                    "contact_phone": itemData.contact_phone,
                    "remark": itemData.remark
                };

                let url = '/shCloud/addOrg';
                if(itemData.id) {
                    postData.id = itemData.id;
                    url = '/shCloud/addOrg';
                }

                this.util.post(url, postData).then(res => {
                    if(res.status == 200) {
                        this.$Message.success(res.msg);
                        this.getOrList();
                        this.itemModal = false;
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })

            },
        },
    }
</script>

